<template>
  <div id="main" style="width: 100%;height: 100%;">
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: "subsection",
  data() {
    return {
      charts: '',
      opinionData: [],
    }

  },
  //调用

  methods: {
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        title: {
          text: '成绩分段'
        },

        tooltip: {},
        legend: {
          data: ['成绩分段']
        },
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          data: ["0-30分", "30-60分", "60-80分", "80-100分"]
        },
        yAxis: {
          // 纵轴标尺固定
          type: 'value',
          scale: true,
          max: 15,
          min: 0,
          splitNumber: 20,
        },
        series: [{
          name: '总共人数',
          type: 'bar',
          stack: '总量',
          barCategoryGap: '60%',
          data: this.opinionData,
          itemStyle: {
            color: '#62A1A9'  //设置柱子颜色
          },
          emphasis: {
            itemStyle: {
              color: '#2F4654',   //hover时改变柱子颜色
              // shadowColor: 'rgba(102,102,102,0.50)',
              // shadowOffsetX: 0,
              // shadowOffsetY: 2,
              // shadowBlur: 6,
              borderWidth: 4,
              borderColor: '#2F4654',
              // borderType: 'solid'
            }
          },
        },

        ]
      })
    },
  },
  created() {
    this.axios
        .post('/zj/paper/queryAchievement.htm')
        .then(
            function (response) {
              response.data.result.filter((item, i) => {
                this.opinionData.push(item)
              })
              // this.charts.setOption(true)
              this.drawLine('main')
            }.bind(this)
        )
        .catch(function (error) {
          console.log(error);
        });

  },
  mounted() {
    this.$nextTick(function () {
      this.drawLine('main')
    })
  },
}
</script>

<style scoped>

</style>
